<!DOCTYPE HTML>
<html>
<head>
   <meta charset="utf-8"/>
   <title>改变DIV的颜色、大小</title>
</head>
<style>
    #div1{
    	width:200px;height:200px;background:red;
    }
</style>
<script>
//用函数把重复部分封装起来
    function toGreen(){
        //声明一个变量，选定div1
        var oDiv = document.getElementById('div1');
        //统一用变量表示
    	oDiv.style.width='300px';  
        oDiv.style.height='300px'; 
        oDiv.style.background='green';
    }

    function toRed(){
        oDiv = document.getElementById('div1');
        oDiv.style.width='200px';  
        oDiv.style.height='200px'; 
        oDiv.style.background='red';
    }

</script>

<body>

    <!--要实现的效果-->
    <!--当鼠标移到div1上时，div1表大，颜色变成绿色-->
    <!--当鼠标离开div1时，div1变回原来的大小，颜色变回红色-->
    <div id="div1"  onmouseover="toGreen()" onmouseout="toRed()" /></div>
                    
</body>
</html>























































